<template>
	<view>
		<image src="@/static/imgs/raw.png" alt="" style="width: 100%;height: 560rpx;" />
		<view class="header">
			<view class="header-left">牛的编号</view>
			<view class="header-right">
				<view>偏瘦</view>
				<i class="iconfont icon-xiangyoujiantou"></i>
			</view>
		</view>
	</view>
	<view class="mune">设备信息</view>
	<view class="mune-item" v-for="(item, index) in item" :key="index">
		<view class="mune-item-left">{{item.title}}</view>
		<view class="mune-item-right">
			<view>{{item.Percentage}}</view>
			<image :src="item.img" alt="" style="width: 40rpx;height: 40rpx;" />
			<view>IMEI</view>
			<view>{{item.nuber}}</view>
		</view>
	</view>
	<view class="mune">牲畜信息</view>
	<view class="mune-list" v-for="(item,index) in mergedData" :key="index">
		<view class="mune-list-left" >{{item.label}}</view>
		<view class="mune-list-right">{{item.value}}</view>
	</view>
	<navigator :url="'/pages/map/Mapnavigation'">
	<button class="btn">前往追踪</button>
	</navigator>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const item = ref([{
			title: '智能耳标',
			Percentage: '80%',
			img: '/static/imgs/eq_info.png',
			nuber: '123456789'
		},
		{
			title: '智能项圈',
			Percentage: '1%',
			img: '/static/imgs/dianliang.png',
			nuber: '1234569'
		},
	])
	const mergedData = ref([
	  { label: '品种', value: '牛' },
	  { label: '类型', value: '小黄牛' },
	  { label: '性别', value: '公' },
	  { label: '年龄', value: '5岁两个月' },
	  { label: '体重', value: '900KG' },
	  { label: '当前状态', value: '生长中' },
	  { label: '是否绝育', value: '否' },
	  { label: '疫苗', value: '2024-01-22 15:22' }
	])
</script>

<style scoped>
	@import '../../static/iconfont/iconfont.css';

	.header {
		width: 100%;
		height: 110rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.header-left {
		font-size: 40rpx;
		margin-left: 40rpx;
	}

	.header-right {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
		color: chocolate;
	}

	.mune {
		width: 100%;
		height: 60rpx;
		background-color: #EFEFEF;
		line-height: 60rpx;
		padding: 0 40rpx;
	}

	.mune-item {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.mune-item-left {
		margin-left: 40rpx;
	}

	.mune-item-right {
		width: 400rpx;
		margin-right: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	
	.mune-list {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #e5e7eb;
	}
	
	.mune-list-left {
		margin-left: 40rpx;
	}
	
	.mune-list-right {
		width: 400rpx;
		margin-right: 40rpx;
		display: flex;
		align-items: center;
		justify-content: end;
	}
	
	.btn{
		margin-top: 40rpx;
		width: 90%;
		height: 80rpx;
		background-color: #0BCB75;
		border-radius: 50rpx;
		color: #fff;
	}
</style>